<route>
    {
        meta: {
            layout: 'index',
            title:'公司管理'
        }
    }  
</route>
<template>
    <view>
        <a-row>
            <a-input-search v-model:value="searchKey" placeholder="请输入名称"
                style="width: 200px; margin-bottom: 10px; margin-right: 50px;" @search="onSearch()" />
            <a-button type="primary" style="margin-bottom: 10px; width: 80px;" @click="handleAdd(null)">
                <template #icon><plus-outlined /></template>新增
            </a-button>
        </a-row>
        <a-table :columns="columns" :data-source="dataSource">
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'action'">
                    <a-button type="link" @click="handleAdd(record)">
                        <PlusOutlined />
                    </a-button>
                    <a-button type="link" @click="editItem(record)">
                        <FormOutlined />
                    </a-button>
                    <AntdZh>
                        <a-popconfirm title="确定删除该条记录 ?" @confirm="del(record.id)">
                            <a-button type="link" danger>
                                <DeleteOutlined />
                            </a-button>
                        </a-popconfirm>
                    </AntdZh>
                </template>
            </template>
        </a-table>

        <AntdConfirmModal :title="title" ref="modalRef" width="600px" :keepSlot="false" @confirm="submitForm">
            <a-form :model="form" name="basic" :label-col="{ span: 5 }">
                <a-row>
                    <a-col :span="20">
                        <a-form-item label="公司名称" name="companyName" :rules="[{ required: true, message: '请输入公司名称' }]">
                            <a-input v-model:value="form.companyName" style="width: 400px;" placeholder="请输入全称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="公司编码" name="companyCode" :rules="[{ required: true, message: '请输入编码' }]">
                            <a-input v-model:value="form.companyCode" style="width: 400px;" placeholder="请输入编码" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="公司简称" name="shortName">
                            <a-input v-model:value="form.shortName" style="width: 400px;" controls-position="right" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="排序" name="orderNum">
                            <a-input-number v-model:value="form.orderNum" style="width: 400px;" controls-position="right"
                                :min="0" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="公司服务地址" name="companyHost">
                            <a-input v-model:value="form.companyHost" style="width: 400px;" controls-position="right" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </AntdConfirmModal>
    </view>
</template>
<script setup>
import { PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { queryOne, queryList, queryTree, updateOne, deleteOne, createOne } from "../../api/company"
import { columns, formValue } from './index';
import useApp from "@/hooks";
const { $, proxy } = useApp();
const editableData = reactive({});
const dataSource = ref([]);
const form = ref(formValue);
const query = ref({ keyWord: undefined });
const title = ref(null);
const modalRef = ref(null);
// const columns = [
//     {
//         title: '公司名称',
//         dataIndex: 'companyName',
//         key: 'companyName',
//     },
//     {
//         title: '公司编码',
//         dataIndex: 'companyCode',
//         key: 'companyCode',
//     },
//     {
//         title: '公司简称',
//         dataIndex: 'shortName',
//         key: 'shortName',
//     },
//     {
//         title: '排序',
//         dataIndex: 'orderNum',
//         key: 'orderNum',
//     },
//     {
//         title: '公司服务地址',
//         dataIndex: 'companyHost',
//         key: 'companyHost',
//     },
//     {
//         title: '操作',
//         dataIndex: 'action',
//         key: 'action',
//     },
// ];
//编辑
function editItem(e) {
    /* form.value = e
    title.value = false
    modalRef.value.openModal() */
    title.value = `【${e.companyName}】信息修改`
    queryOne(e.id).then(res => {
        form.value = res
        modalRef.value.openModal()
    })
}
// 删除
function del(id) {
    deleteOne(id).then(r => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        buildTree()
    })
}
//#region 
/* const del = key => {
    deleteOne(key).then(res => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        getList()
    })
} */
/* // 新增
function add() {
    title.value = true
    form.value = {}
    modalRef.value.openModal()
}
// 新增子公司
function addItem(e) {
    title.value = true
    form.value = {}
    form.value.pid = e
    modalRef.value.openModal()

} */
//#endregion
// 新增操作
function handleAdd(e) {
    form.value = formValue
    // 如果为空-> 新公司
    if ($.isEmpty(e)) {
        title.value = '新增公司'
        form.value = {}
    } else {
        //新增子公司
        title.value = `新增【${e.companyName}】的子公司`
        form.value = {}
        form.value.pid = e.id;
    }
    modalRef.value.openModal()
}
// 提交
function submitForm() {
    // 没有ID 就是新增
    if ($.isEmpty(form.value.id)) {
        createOne(form.value).then(r => {
            buildTree()
            modalRef.value.closeModal()
            $.showToast({
                title: '新建成功',
                icon: 'success'
            })
        })
    } else {
        updateOne(form.value).then(r => {
            buildTree()
            modalRef.value.closeModal()
            $.showToast({
                title: '更新成功',
                icon: 'success'
            })
        })
    }
    /*     if (title.value == true) {
            createOne(form.value).then(res => {
                console.log('tijiao',res);
                $.showToast({
                    title: '新增成功',
                    icon: 'success'
                })
                modalRef.value.closeModal();
                getList()
            })
        } else if (title.value == false) {
            updateOne(form.value).then(res => {
                $.showToast({
                    title: '更新成功',
                    icon: 'success'
                })
                modalRef.value.closeModal();
                getList()
            })
        } */
}
// 搜索
function onSearch() {
    queryTree(query.value).then(res => {
        //console.log(res)
        dataSource.value = res;
    })
}
// 更新部门树
function buildTree() {
    queryTree().then(res => {
        // console.log(res)
        dataSource.value = res;
    })
}
buildTree()
/* function getList() {
    queryList(query.value).then(res => {
        console.log(res)
        dataSource.value = res
    })
}
getList() */
</script>